"use client";

import {useAuth} from "@/components/authProvider";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Label} from "@/components/ui/label";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";


const LOGIN_URL = "/api/login";

export default function LoginPage() {
    const auth = useAuth();

    async function handleSubmit(event) {
        // 整体思路：
        //     1、获取表单数据 转换成json格式 将数据发送给 nextjs /api/login
        //     2、/api/login 获取数据将数据发送给fastapi后端获取到access_token 并将 token设置到session中

        // 禁止页面地址跳转 会拼接form表单中的key和value到提交地址中/login?username=xxx&password=xxx
        event.preventDefault();
        // event.target <form>标签里的html内容
        // console.log(event, event.target);

        // 构建表单数据
        const formData = new FormData(event.target);
        // 从表单中获取数据对象
        const objectFromForm = Object.fromEntries(formData);
        // 将对象转换为json格式 {"username":"xxx","password":"xxx"}
        const jsonData = JSON.stringify(objectFromForm);
        // console.log(jsonData);
        // 构建请求信息：请求方式、请求头、请求体
        const requestOptions = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: jsonData,
        }
        // 从next js 定义的 /api/login 地址请求数据
        const response = await fetch(LOGIN_URL, requestOptions);
        console.log("login/page.jsx ", response.status);
        const data = await response.json();
        console.log(data);
        if (response.ok) {
            console.log("logged in");
            auth.login();
        }
    }

    return (
        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
            <div className="w-full max-w-sm">
                <div className="flex flex-col ">
                    <Card>
                        <CardHeader>
                            <CardTitle>使用密码登录</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <form onSubmit={handleSubmit}>
                                <div className="flex flex-col gap-6">
                                    <div className="grid gap-3">
                                        <Label htmlFor="username">用户名：</Label>
                                        <Input
                                            id="username"
                                            type="text"
                                            name="username"
                                            placeholder="请输入用户名"
                                            required
                                        />
                                    </div>
                                    <div className="grid gap-3">
                                        <div className="flex items-center">
                                            <Label htmlFor="password">密码：</Label>
                                            <a
                                                href="#"
                                                className="hidden"
                                            >
                                                Forgot your password?
                                            </a>
                                        </div>
                                        <Input id="password" name="password" type="password" required/>
                                    </div>
                                    <div className="flex flex-col gap-3">
                                        <Button type="submit" className="w-full">
                                            登录
                                        </Button>
                                    </div>
                                </div>
                                <div className="mt-4 text-center text-sm">
                                    还没有账户?{" "}
                                    <a href="#" className="underline underline-offset-4">
                                        注册
                                    </a>
                                </div>
                            </form>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
}
